<template>
	<view class="room-list">
		<view class="room-list__item w-full" v-for="item in roomsList" :key="item.aptId">
		  <view class="room-list__title" @click="goDetail(item.aptId)">
			{{ item.aptName }}
			<uni-icons type="forward" size="18"></uni-icons>
		  </view>
		  <view class="room-list__tag">
			<view v-for="(tag,index) in item.tags" :key="index">{{ tag }}</view>
		  </view>
		  <view class="room-list__address">
			<text class="truncate dept-address">{{ item.address }}</text>
			<view class="location">
        <!--<text class="icon-addr"></text>-->
        <!--<text v-if="(positionLat&&positionLon) || item.distance">{{$filters.formatDistance(item.distance)}}</text>-->
        <!--<text v-else @click="getLocation">去授权位置</text>-->
			</view>
		  </view>
		  <view class="room-list__detail w-full" v-if="item.layoutInfo&&item.layoutInfo.length">
			<u-scroll-list :indicator="false" class="w-full">
			  <view class="room-detail"  v-for="room in item.layoutInfo" :key="room.layoutId" @click="goRoomTypeDetail(room.layoutId,item.aptId,item.aptName)">
				<view class="pic">
					<image class="img" :src="$filters.oosImgZip(room.picUrl)" mode="aspectFill"></image>
				  	<view class="full" v-if="room.emptyRoomNum==0">满房</view>
					<view class="nervous" v-if="room.emptyRoomNum>0&&room.emptyRoomNum<=5">紧张</view>
				</view>
				<view class="w-full truncate room-type">{{ room.name }}</view>
				<view class="w-full truncate price-detail">
				  <text class="room-price">{{ room.price ?? 0 }}</text>
				  <text class="room-cycle truncate">元/月起</text>
				</view>
			  </view>
			  <view class="lastBox">
			  	<view class="lastIn" @click="goDetail(item.aptId)">进店
					<view class="icon"></view>
				</view>
			  </view>
			</u-scroll-list>
		  </view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { watch,ref} from 'vue'
const positionLat = uni.getStorageSync('positionLat')
const positionLon = uni.getStorageSync('positionLon')
const emit = defineEmits(['getList'])

const props = defineProps({
	roomsList:{
		type: Array,
		default: () => []
	}
})
const getLocation = ()=>{
	// #ifdef APP-PLUS
	uni.getLocation({
		type: 'gcj02',
		success: (res)=>{
			console.log('getLocation success-----:'+res.latitude+'  '+res.longitude)
			uni.setStorageSync('positionLat',res.latitude)
			uni.setStorageSync('positionLon',res.longitude)
			emit('getList',{})
		},
		fail:(err)=> {
			uni.showModal({
			  title: '提示',
			  content: '获取位置信息失败，是否授权打开定位',
			  success: (res) => {
				if(res.confirm){
				  uni.getSystemInfo({
				   success: (sys) => {
					 if(sys.platform=='ios'){
					  plus.runtime.openURL("app-settings://");
					 }else{
					  var main = plus.android.runtimeMainActivity();
					  var Intent = plus.android.importClass("android.content.Intent");
					  //可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
					  var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
					  main.startActivity(mIntent);
					 }
				   }
				  })
				}
			  }
			})
		}
	})
	// #endif

	// #ifdef MP-WEIXIN
	uni.getSetting({
		success(res) {
			console.log(res,'----1')
			// 如果没有授权
			if (!res.authSetting['scope.userLocation']) {
				// 则拉起授权窗口
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						//如果授权了
						uni.getLocation({
							type: 'gcj02',
							success: (res)=>{
								console.log('getLocation success-----:'+res.latitude+'  '+res.longitude)
								uni.setStorageSync('positionLat',res.latitude)
								uni.setStorageSync('positionLon',res.longitude)
								emit('getList',{})
							},
							fail:(err)=> {
								uni.showToast({
									title:'位置信息获取失败',
									icon:'none'
								})
								console.log(err, '失败信息');
							}
						})
					},
					fail(error) {
						//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
						uni.showModal({
							title: '提示',
							content: '若点击不授权，将无法使用位置功能',
							cancelText: '不授权',
							cancelColor: '#999',
							confirmText: '授权',
							confirmColor: '#f94218',
							success(res) {
								console.log(res)
								if (res.confirm) {
									// 选择弹框内授权
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								} else if (res.cancel) {
									// 选择弹框内 不授权
									console.log('用户点击不授权')
								}
							}
						})
					}
				})
			} else {
				console.log('有授权');
				// 有权限则直接获取
				uni.getLocation({
					type: 'gcj02',
					success: (res)=>{
						console.log('getLocation success-----:'+res.latitude+'  '+res.longitude)
						uni.setStorageSync('positionLat',res.latitude)
						uni.setStorageSync('positionLon',res.longitude)
						emit('getList',{})
					},
					fail:(err)=> {
						uni.showToast({
							title:'位置信息获取失败',
							icon:'none'
						})
						console.log(err, '失败信息');
					}
				})
			}
		}
	})
	// #endif
}

const goDetail = (id) => {
	uni.navigateTo({
		url:`/pages/searchRoom/roomDetail?roomId=${id}`
	})
}
const goRoomTypeDetail = (layoutId,aptId,name) => {
	uni.navigateTo({
		url:`/pages/searchRoom/layoutDetail?layoutId=${layoutId}&roomId=${aptId}&roomName=${name}`
	});
}
</script>

<style lang="scss" scoped>
  @mixin display-flex{
    display: flex;
  }
  @mixin flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @mixin flex-items-center{
    align-items: center;
  }
  @mixin flex-justify-center{
    justify-content: center;
  }
  $spacing10: 10rpx;
  $leading-40: 40rpx;
  .room-list{
	  width: 686rpx;
	  margin: 0 auto;
    .w-full{
      width: 100%;
    }
    .truncate{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .location{
      font-size: 24rpx;
      color: #7A7A7A;
    }
    &__item{
      padding: 16rpx 0 6rpx 20rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.05);
      border-radius: 8rpx;
      margin-bottom: 16rpx;
    }
    &__title{
      font-size: 30rpx;
	  font-weight: bold;
      color: #000000;
      line-height: 48rpx;
      @include display-flex;
      @include flex-items-center;
      :deep(.uniui-forward){
        margin-top: 5rpx;
      }
    }
    &__tag{
      @include display-flex;
      margin-top: $spacing10;
      & > view {
        margin-right: $spacing10;
        padding: 0 15rpx;
        background: #F1F1F6;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        font-size: 20rpx;
        color: #999999;
      }
    }
    &__address {
      @extend .location;
      line-height: $leading-40;
      @include display-flex;
      justify-content: space-between;
      padding-right: 20rpx;
      margin: 14rpx 0 20rpx 0;
      .dept-address{
        width: 470rpx;
      }
	  .location{
		  color: #999;
	  }
      .icon-addr{
        display: inline-block;
        width: 28rpx;
        height: 28rpx;
        background: url('#{$imgUrl}/index/room-addr.png') no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
        margin: -4rpx 8rpx 0 0;
      }
    }
    &__detail{
		.room-detail{
			margin-right: 16rpx;
			width: 188rpx;
			.pic{
				width: 188rpx;
				height: 142rpx;
				border-radius: 8rpx;
				margin: 0 0 15rpx;
				overflow: hidden;
				position: relative;
				.full{
					position: absolute;
					top: 0;
					left: 0;
					width: 188rpx;
					height: 142rpx;
					background: rgba(0, 0, 0, 0.4);
					color: #fff;
					line-height: 142rpx;
					text-align: center;
					z-index: 9;
				}
				.nervous{
					position: absolute;
					top: 0;
					left: 0;
					height: 34rpx;
					line-height: 34rpx;
					color: #fff;
					font-size: 20rpx;
					padding: 0 18rpx;
					background: linear-gradient(89deg, #FF7C53 0%, #FF2626 100%);
					border-radius: 8rpx 0 8rpx 0;
					z-index: 11;
				}
			}
			.room-type{
			  font-size: 24rpx;
			  color: #7A7A7A;
			  line-height: 28rpx;
			  margin: 2rpx 0 4rpx
			}
			.price-detail{
			  @include display-flex;
			  @include flex-items-center;
			  .room-price{
				font-size: 28rpx;
				color: #FD9618;
				line-height: 36rpx;
				font-weight: bold;
			  }
			  .room-cycle{
				font-size: 12rpx;
				color: #BDBDBD;
				line-height: 24rpx;
			  }
			}
		}
		.lastBox{
			padding-right: 16rpx;
			.lastIn{
				width: 48rpx;
				height: 142rpx;
				background: #F1F1F6;
				border-radius: 4rpx;
				text-align: center;
				font-size: 24rpx;
				color: #666;
				padding: 22rpx 6rpx 0;
				line-height: 32rpx;
				.icon{
					width: 28rpx;
					height: 28rpx;
					background: url('#{$imgUrl}/icon/goDetail.png') no-repeat;
					background-size: 100% 100%;
					margin: 6rpx auto 0;
				}
			}
		}
    }
  }
  .popBox{
  	background: #fff;
  	padding: 54rpx 20rpx;
  	border-radius: 32rpx;
	margin: 42rpx;
  	.popTit{
  		text-align: center;
  		font-size: 36rpx;
  		font-weight: bold;
  		line-height: 48rpx;
  		margin: 0 0 20rpx;
  	}
	.popBtn{
		text-align: center;
		font-size: 30rpx;
	}
  }
</style>
